<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <#include "/pubHeadStyleTree.html">
        <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
        <link rel="stylesheet" href="${ctx}/qbdmsStatic/iconfont/iconfont.css"/>
        <link rel="stylesheet" href="${ctx}/qbdmsStatic/style/qbdms.css">
</head>
<body>
<style>
    .ztree li a.curSelectedNode{
        background:none;
        border:none;
        color: #2682FF;
    }
    .ztree li span.button.diy_ico_open,.ztree li span.button.diy_ico_close{
        width: 0px;
    }
    .ztree li .curSelectedNode span.button.diy_ico_docu{
        background: url("${ctx}/qbdmsStatic/images/spot2.png") no-repeat 0 0;
    }
    .ztree li span.button.diy_ico_docu{
        background: url("${ctx}/qbdmsStatic/images/spot1.png") no-repeat 0 0;
    }
    .ztree li span.button.root_close,.ztree li span.button.center_close,.ztree li span.button.bottom_close{
        background: url("${ctx}/qbdmsStatic/images/plus.png") no-repeat 0 0;
    }
    .ztree li span.button.root_open,.ztree li span.button.center_open,.ztree li span.button.bottom_open{
        background: url("${ctx}/qbdmsStatic/images/minusSign.png") no-repeat 0 0;
    }
    .orgTreeCont{
        float:left;
        top:8px;
        bottom: 0px;
        overflow: auto;
        border: 1px solid rgba(229,240,255,1);
    }
    .orgTreeCont>p {
        height: 30px;
        background-color: rgba(229,240,255,1)!important;
        line-height: 30px;
        display: block;
        text-indent: 1em;
    }
    .selectorLi{
        float: right;
        width: 180px;
        height: 100%;
        border: 1px solid rgba(229,240,255,1);
    }

    .selectorLi>p{
        display: block;
        height: 30px;
        line-height: 30px;
        background: rgba(229,240,255,1);
        text-indent: 1em;
        padding-right: 10px;
    }
    .selectorLi>p>i{
        float: right;
        color: #fff;
    }

    .selectorListTab{
        margin: 0px 187px 0 25px;
        left: 250px;
    }
    .selch>a{
        margin: 4px;
    }
    .selch label.layui-form-label{
        padding-top: 4px;
    }
    .selch a.fillBtn{
        right: 15px;
        position: absolute;
        top: 12px;
    }
    .selch>div{
        margin-right: 80px;
    }
    .selectPop{
        padding: 14px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        height: 100%;
        float: left;
        width: 100%;
        overflow: hidden;
    }
    .ztree{
        position: absolute;
        background: #fff;
        bottom: 0px;
        top: 30px;
        right: 0;
        left: 0;
        overflow: auto;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }
    .layui-table-view,.selch{
        margin: 0;
    }
    .selectorTake{
        float: left;
        overflow: auto;
        height: 90%;
        width: 100%;
    }
    .selectorTake li{
        float: left;
        width: 100%;
        height: 38px;
        line-height: 38px;
        border-bottom: 1px solid #e6e6e6;
    }
    .selectorTake li p{
        float: left;
        height: 38px;
        line-height: 38px;
        width: 90%;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        text-indent: 10px;
    }
    .selectorTake li i{
        cursor: pointer;
    }
</style>
<script type="text/html" id="headerManagementUser">
    <form class="layui-form" lay-filter="queryForm">
        <div class="layui-form-body selch" style="height: 100%;">
            <div >
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block" style="    margin-left: 80px;">
                    <input type="hidden" name="selectUser" value="">
                    <input type="text" class="layui-input filter-value"  name="Q_fullName_SL" placeholder="请输入"/>
                </div>
            </div>
            <a class="layui-btn layui-btn-sm fillBtn" lay-event="query">
                <span>查询</span>
            </a>
        </div>
    </form>


    <!--<div class="layui-btn-container" style="float: right;margin-top: 4px">-->
        <!--<a class="layui-btn layui-btn-sm" lay-event="query">-->
            <!--<i class="layui-icon layui-icon-search"></i>-->
            <!--<span>查询</span>-->
        <!--</a>-->
    <!--</div>-->
    <!--<form class="layui-form" lay-filter="queryForm" style="margin-top:10px">-->
        <!--<div class="table-top-filter">-->
            <!--<div class="table-filter-alone">-->
                <!--<label class="layui-form-label" style="width: 58px">姓名</label>-->
                <!--<input type="hidden" name="selectUser" value="">-->
                <!--<input style="width:180px" type="text" class="layui-input filter-value" name="Q_fullName_SL" placeholder="姓名"/>-->
            <!--</div>-->
        <!--</div>-->
    <!--</form>-->
</script>
<div name="userSelectorDiv" class="selectPop">
    <div class="ccpui-trees orgTreeCont">
        <p class="isShowTree colorSwitch">
            <span>按组织查找</span>
            <!--<span style="float: left;color: #fff">&nbsp;&nbsp;待办事宜</span>-->
            <i layadmin-event="treeFlexible" class="layui-icon layui-icon-prev"></i>
        </p>
        <div style="margin-top: 6px;" >
            <ul id="orgTree" class="ztree"></ul>
        </div>
    </div>
    <div class="selectorLi">
        <p>
            <span>已选择</span>
            <i layadmin-event="treeFlexible" class="layui-icon layui-icon-next"></i>
        </p>
        <ul class="selectorTake">

        </ul>
    </div>
    <div class="selectorListTab ccpui-coreContent">
        <table class="layui-hide" id="userListTable" lay-filter="userListTable"></table>
    </div>
</div>
<script>
    var selectUserId = '${selectUserId}';
    var radioUser;
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index', 'table', 'layer', 'treeSelect', 'form', 'laydate', 'totalFilter', 'setter', 'commons', 'common'], function () {
        var setter = layui.setter
            , common = layui.common
            , table = layui.table
            , commons = layui.commons
            , totalFilter = layui.totalFilter;
        //选中的组织
        var selectOrgId;
        //已选择的用户
        var selectUser = '';
        var dataPrivacyLevel = '${dataPrivacyLevel}';

        //加载组织树
        loadOrgTree();

        function loadOrgTree() {
            $.ajax({
                url: "${ctx}/extend/sysOrg/tenTreeList",
                type: "get",
                contentType: 'application/json',
                dataType: 'json',
                success: function (data) {
                    if (commons._filterRecord(data)) {
                        var zNodes = data.data;
                        for(var i = 0; i < zNodes.length;i++){
                            zNodes[i].iconSkin ="diy"
                            // zNodes[i].iconOpen ="${ctx}/qbdmsStatic/images/no.png"
                            // zNodes[i].iconClose ="${ctx}/qbdmsStatic/images/word.png"
                        }
                        var setting = {
                            view: {
                                showLine: true,
                                nameIsHTML: true,
                            },
                            data: {
                                simpleData: {
                                    enable: true,
                                    idKey: "orgId",
                                    pIdKey: "orgSupId"
                                }
                            },
                            callback: {
                                onClick: onClickOrgTree
                            }
                        };
                        $.fn.zTree.init($('#orgTree'), setting, zNodes);
                    } else {
                        window.parent.layer.alert(data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert("暂无数据，请稍后操作！" + XMLHttpRequest.status);
                }
            });
        }
        // 选择器 交互逻辑处理
        $(document).on('click', '.selectorLi p i', function () {
            $(this).parent().siblings("ul.selectorTake").toggle()
            $(this).siblings("span").toggle()
            var isSpreads = $(this).hasClass('layui-icon-prev');
            if (isSpreads){
                $(this).parent().parent(".selectorLi").css("width","35px")
                $(this).parent().parent(".selectorLi").siblings(".selectorListTab").css("margin-right","50px")
            }else {
                $(this).parent().parent(".selectorLi").css("width","180px")
                $(this).parent().parent(".selectorLi").siblings(".selectorListTab").css("margin-right","187px")
            }
            layui.table.resize($(this).parent().parent(".selectorLi").siblings(".selectorListTab").children("table").attr("id"));

        });
        //组织数点击事件
        function onClickOrgTree(event, treeId, treeNode, clickFlag) {
            selectOrgId = treeNode.orgId;
            common.tableConditionRender("userListTable", "queryForm", {where: {"orgId": treeNode.orgId}}, true);
        }

        table.render({
            elem: '#userListTable',
            method: 'get',
            url: '${ctx}/extend/sysUser/listByTenTree?dataPrivacyLevel=' + dataPrivacyLevel,
            page: true,
            height: 'full-30',
            defaultToolbar: [],
            where: {},
            toolbar: '#headerManagementUser',
            cols: [
                [
                    {type: 'radio'},
                    {field: 'userId', title: 'ID', sort: true, hide: true},
                    {field: 'fullName', title: '姓名',minWidth:100},
                    {field: 'orgName', title: '所属单位',minWidth:100}
                ]
            ],
            parseData: function (res) {
                console.log(res);
                var _data = res.data;
                if (_data.length > 0) {
                    for (var i = 0; i < _data.length; i++) {
                        var _d = _data[i];
                        if (_d.userId == selectUserId) {
                            _d.LAY_CHECKED = true;
                            radioUser = _d;
                        }
                    }
                }
            }
        });
        totalFilter.init('userListTable');
        table.on('toolbar(userListTable)', function (obj) {
            switch (obj.event) {
                case 'query':
                    common.tableConditionRender("userListTable", "queryForm", {where: {"orgId": selectOrgId}}, false);
                    break;
            }
        });

        $(document).on("click", ".center .layui-table-body table.layui-table tbody tr", function () {
            var obj = event ? event.target : event.srcElement;
            var tag = obj.tagName;
            var radio = $(this).find("td div.laytable-cell-radio div.layui-form-radio I");
            if (radio.length != 0) {
                if (tag == 'DIV') {
                    radio.click();
                }
            }
        });
        $(document).on("click", ".center td div.laytable-cell-radio div.layui-form-radio", function (e) {
            e.stopPropagation();
        });

        table.on('radio(userListTable)', function (obj) {
            var data = obj.data;
            selectUser = data;
//            selectorIds = [obj.data.fullName];
            selectorListInit(obj.data.fullName)
        });
        // 初始化选中列表部分
        function selectorListInit(fullName) {
            $('.selectorTake').html('');
            if (fullName){
                $('.selectorTake').append('<li><p>' + fullName + '</p><i class="layui-icon layui-icon-delete selectorTakeDel"></i></li>');
            }
//            for (var i = 0; i < selectorIds.length; i++) {

//            }
        }
        // 选择器已选择删除事件
        $(document).on("click", '.selectorTakeDel', function () {
            selectorListInit();
            table.reload('userListTable');
        });
        //保存
        window.saveData = function (index) {
            $("input[name=selectUser]").val(JSON.stringify(selectUser));
        };

        //撤销
        window.cancelData = function (index) {
            selectUserId = null;
            table.reload('userListTable');
        };

        //全部取消
        $(".bottom .cancelData").click(function () {
            selectUser = radioUser;
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });
    });
</script>
</body>
</html>